<template>
  <div class="ShoppingCart">
    <div class="ShopHeader">
      <headerT></headerT>
      <div class="cont1200 title">
        <router-link to="/">
          <img class src="@/assets/ba.png" alt />
        </router-link>
      </div>
      <div class="cont1200 masti" v-if="!PlaceOrder.length>0">
        <br />
        <p>噢，您的购物车空了快去商场看看吧</p>
        <br />
      </div>
    </div>
    <div class="cont1200 ShopBody" v-if="PlaceOrder.length>0">
      <el-card class="box-card" shadow="never">
        <div>
          <ul class="ShopBodyUL">
            <li @click="PreAll">
              <el-checkbox v-model="checkAll">全选</el-checkbox>
            </li>
            <li>名称</li>
            <li>单价</li>
            <li>属性</li>
            <li>数量</li>
            <li>小计</li>
            <li>操作</li>
          </ul>
          <el-checkbox-group v-model="checkList">
            <ul class="ShopItem f-l" v-for="(item,index) in PlaceOrder" :key="item.id">
              <li>
                <el-checkbox :label="index">{{ index + 1}}</el-checkbox>
              </li>
              <li>
                <router-link :to="{name:'products',params:{proid:'1'}}">
                  <img :src="item.imageShow" alt />
                </router-link>
              </li>
              <li>
                <router-link :to="{name:'products',params:{proid:'1'}}">{{item.name}}</router-link>
              </li>
              <li>¥{{item.price}}</li>
              <li>{{item.typename}}</li>
              <li>
                <el-input-number
                  size="small"
                  :min="1"
                  v-model="item.num"
                  @change="updataNum(item.carId, item.num)"
                ></el-input-number>
              </li>
              <li>¥{{ item.price*item.num }}</li>
              <li>
                <span class="remShopping" @click="remPro([index])">删除 {{index}}</span>
                <!-- <span>加入收藏夹</span> -->
              </li>
            </ul>
          </el-checkbox-group>
        </div>
      </el-card>
    </div>

    <div class="ShoppingBottom" v-if="PlaceOrder.length>0">
      <span @click="PreAll">
        <el-checkbox v-model="checkAll">全选</el-checkbox>
        <!-- {{checkList}} -->
      </span>
      <span @click="remPro(checkList)">全部删除</span>
      {{checkList}}
      <!-- <span>清除失效宝贝</span> -->
      <!-- <span>移入收藏夹</span> -->
      <!-- <span>分享</span> -->
      <div class="f-r">
        <span>已选商品:{{number}}件</span>
        <span>合计:{{ prc }}</span>
        <el-button type="danger" class="ShopButton" @click="PlaceOrderJS">结算</el-button>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import headerT from "../Header/t";
import { isNull } from "util";
import { mapActions } from "vuex";
import { truncate } from "fs";

export default {
  data() {
    return {
      PlaceOrder: [
        {
          id: 1,
          num: 10,
          name: "productsname",
          typeId: 21,
          typename: "typename",
          price: 10,
          imageShow:
            "https://img1.tuhu.org/Images/Products/9da3/eea4/840f700da102052baf710152_w800_h800.jpg@110w_110h_100Q.jpg"
        },
        {
          id: 11,
          num: 10,
          name: "productsname",
          typeId: 21,
          typename: "typename",
          price: 10,
          imageShow:
            "https://img1.tuhu.org/Images/Products/9da3/eea4/840f700da102052baf710152_w800_h800.jpg@110w_110h_100Q.jpg"
        },
        {
          id: 12,
          num: 10,
          name: "productsname",
          typeId: 21,
          typename: "typename",
          price: 10,
          imageShow:
            "https://img1.tuhu.org/Images/Products/9da3/eea4/840f700da102052baf710152_w800_h800.jpg@110w_110h_100Q.jpg"
        }
      ], //商品列表
      checkList: [], //选择的列表
      checkAll: false, //全选状态
      AlllF: false,
      prc: 0
    };
  },
  watch: {
    checkList(a, b) {
      this.IFAll(a);
      this.TotalPrice();
    }
  },
  created: function() {
    this.getPro(); //获取商品
  },
  methods: {
    ...mapActions(["getProXa"]),
    //获取购物车商品
    getPro() {
      this.getProXa().then(res => {
        this.PlaceOrder = res.list;
      });
    },
    //单击单独的选框时是否开启全选
    IFAll(a) {
      var len1 = this.PlaceOrder.length;
      var len2 = a.length;
      if (this.AlllF) {
        this.checkAll = len1 == len2 ? false : true;
        this.AlllF = false;
      } else this.checkAll = len1 == len2 ? true : false;
    },
    //执行全选和取消全选
    PreAll() {
      this.AlllF = true;
      !this.checkAll ? this.TrueAll() : (this.checkList = []);
    },
    //删除商品
    remPro(obj) {
      var obj = this.rank(obj, "<");
      for (var i in obj) {
        var index = obj[i];
        this.$api.orderAPI.remPro(this.PlaceOrder[index].typeId);
        this.PlaceOrder.splice(index, 1);
      }
      var list = this.rank(this.checkList, ">");
      if (obj.length > 1) {
        list = [];
      } else {
        for (var i in list) {
          if (list[i] == obj[0]) {
            list.splice(i, 1);
            list[i] -= 1;
          } else if (list[i] > obj[0]) {
            list[i] -= 1;
          }
        }
      }
      this.checkList = list;
      this.IFAll(this.checkList);
    },
    TrueAll() {
      var len1 = this.PlaceOrder.length;
      var obj1 = [];
      for (var i = 0; i < len1; i++) {
        obj1.push(i);
      }
      this.checkList = obj1;
    },
    //修改商品数量
    updataNum(a, b) {
      console.log(a, b);
      this.$api.orderAPI.proNum(a, b);
    },
    //计算总价
    TotalPrice() {
      var obj1 = this.checkList;
      var obj2 = this.PlaceOrder;
      this.prc = 0;
      for (var i in obj1) {
        var data = obj2[obj1[i]];
        // console.log(data);
        if (data.num != undefined && data.num != null) {
          this.prc += data.num * data.price;
        }
      }
    },
    //结算
    PlaceOrderJS() {
      var objData = [];
      var ckList = this.checkList;
      var proList = this.PlaceOrder;
      for (var i in ckList) {
        var t1 = ckList[i];
        objData.push(proList[t1]);
      }
      console.log(objData);
      var ranF = this.randomCoding(5);
      sessionStorage.setItem(ranF, JSON.stringify(objData));
      this.$router.push({
        name: "order",
        query: { plan: ranF }
      });
    }
  },
  computed: {},
  components: {
    headerT
  }
};
</script>
<style lang="scss" type="text/css" scoped>
@import "../../common/style.scss";
.ShoppingCart {
  $gwche: 50px;
  .ShopHeader {
    background-color: white;
    margin-bottom: 10px;
    .title {
      display: block;
      height: 56px;
      line-height: 56px;
    }
  }
  .masti {
    text-align: center;
  }
  .ShopBody {
    .el-card__body {
      padding: 10px;
    }

    .ShopItem,
    .ShopBodyUL {
      width: 100%;
      li {
        float: left;
        width: 115px;
        text-align: center;
      }
    }

    .ShopBodyUL {
      background-color: rgb(241, 241, 241);
      line-height: 40px;
      height: 40px;
      li {
        font-size: 15px;
      }
      li:nth-child(1) {
        width: 80px;
      }
      li:nth-child(2) {
        width: 500px;
      }
    }

    .ShopItem {
      line-height: 100px;
      height: 100px;
      width: 100%;
      padding-left: 10px;
      padding-top: 10px;

      li {
        font-size: 15px;
        img {
          width: 100px;
        }
        .remShopping {
          cursor: pointer;
        }
      }
      li:nth-child(1) {
        text-align: left;
        width: 25px;
      }
      li:nth-child(2) {
        text-align: left;
        width: 100px;
      }
      li:nth-child(5) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      li:nth-child(3) {
        width: 440px;
        text-align: left;
        line-height: normal;
      }
      li:last-child {
        a {
          height: 20px;
          width: 100px;
          display: block;
          float: left;
        }
      }
    }

    .ShopItem:last-child {
      margin-bottom: $gwche;
    }
  }
  .ShoppingBottom {
    position: fixed;
    margin: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 1200px;
    height: $gwche;
    background-color: rgb(241, 241, 241);
    z-index: 2;
    line-height: $gwche;
    padding-left: 10px;
    padding-right: 10px;
    span {
      margin-right: 20px;
    }
    .ShopButton {
      float: right;
      height: $gwche;
      width: 200px;
      border-radius: 0px;
      font-size: 25px;
      letter-spacing: 8px;
      background-color: $main-color12;
      margin-left: 20px;
      span {
        display: block;
        margin-right: 20px;
      }
      span:nth-child(1) {
      }
    }
  }
}
</style>
